<template>
    <div class="about">
        <canvas ref="canvas" height="600" width="400"> </canvas>
        <canvas ref="copy" height="600" width="400"></canvas>
        <canvas
            ref="result"
            style=" background-color: black;"
            height="600"
            width="400"
        ></canvas>
        <img ref="img" src="../../assets/logo.png" alt="" srcset="" />
        <button @click="rotate">旋转</button>
        <button @click="result">结果</button>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import CodeBox from '@/components/CodeBox.vue';
@Component({
    components: {
        CodeBox,
    },
})
export default class BrushProblem extends Vue {
    private mounted() {
        const canvas = this.$refs.canvas as HTMLCanvasElement;
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
        const img = this.$refs.img as CanvasImageSource;
        ctx.drawImage(
            img,
            canvas.width / 2 - (img.width as number) / 2,
            canvas.height / 2 - (img.height as number) / 2,
            canvas.width / 2,
            canvas.height / 2,
        );
    }
    private result() {
        const canvas = this.$refs.copy as HTMLCanvasElement;
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
        const result = canvas.toBlob(this.blobCallBack, 'image/png', 1);
    }
    private async blobCallBack(img: any) {
        const image = img;
        const canvas = this.$refs.result as HTMLCanvasElement;
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
        const bmp = await createImageBitmap(img);
        ctx.drawImage(bmp, 0, 0, 100, 100);
    }
    private rotate() {
        const canvas = this.$refs.copy as HTMLCanvasElement;
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
        const img = this.$refs.img as CanvasImageSource;

        ctx.clearRect(0, 0, 400, 600);
        ctx.save();
        ctx.translate(200, 300);
        ctx.rotate(-Math.PI / 2); // 长宽置换，旋转90
        ctx.translate(-200, -300);
        ctx.drawImage(
            img,
            canvas.width / 2 - (img.width as number) / 2,
            canvas.height / 2 - (img.height as number) / 2,
            canvas.width / 2,
            canvas.height / 2,
        );
        ctx.restore();
    }
}
</script>
<style scoped>
canvas {
    border: red 1px solid;
    background-color: aquamarine;
}
</style>